import React, {useEffect, useState} from "react";
import {Card, Form, Input, Select, Switch} from "antd";
import baseInformationClass from "../index.module.css";


interface MyComponentProps {
    bpmnInstance: any,
}

interface DefaultOptionType {
    value: string;
    label: string;
}

// 任务配置组件
const FormConfigurationView: React.FC<MyComponentProps> = (props: any) => {
        const {bpmnInstance} = props
        const {modeling, bpmnElement = {}, elementRegistry, bpmnFactory} = bpmnInstance
        const [baseInfo, setBaseInfo] = useState<any>();
        useEffect(() => {
            setBaseInfo({
                ...bpmnElement.businessObject,
                formReadOnly: bpmnElement.businessObject.get("flowable:formReadOnly")
            })

        }, [bpmnElement.businessObject]);

        // 改变配置信息
        const baseInfoChange = (value: any, key: string) => {
            console.log(value, key)
            setBaseInfo({...baseInfo, [key]: value});
            switch (key) {
                case "formKey":
                    modeling.updateProperties(bpmnElement, {"flowable:formKey": value || undefined});
                    break;
                case "formReadOnly":
                    modeling.updateProperties(bpmnElement, {"flowable:formReadOnly": value || undefined});
                    break;
            }
        };
        const assigneeTypeList: DefaultOptionType[] = [
            {
                value: "1111",
                label: '表单1',
            }, {
                value: "222",
                label: '表单2',
            }, {
                value: "333",
                label: '表单3',
            }, {
                value: "444",
                label: '表单4',
            },
        ]
        const assigneeTypeMap = assigneeTypeList.reduce((acc, item) => {
            acc[item.value] = item.label;
            return acc;
        }, {} as Record<string, string>);
        return (
            <div className={baseInformationClass.listenerContainer}>

                <Card
                    className={baseInformationClass.CardClass}
                    title={`表单配置`}
                    extra={null}>
                    <Form>
                        <Form.Item
                            label="选择表单"
                            labelCol={{span: 6}}
                            wrapperCol={{span: 18}}>
                            <Select
                                value={[baseInfo?.formKey]}
                                style={{width: '80%'}}
                                options={assigneeTypeList}
                                onChange={(e) => baseInfoChange(e, "formKey")}
                            />
                        </Form.Item>
                        <Form.Item
                            label="表单标识"
                            labelCol={{span: 6}}
                            wrapperCol={{span: 18}}>
                            <Input
                                value={baseInfo?.formKey}
                                onChange={(e) => baseInfoChange(e.target.value, "formKey")}
                            />
                        </Form.Item>
                        <Form.Item
                            label="是否只读"
                            labelCol={{span: 6}}
                            wrapperCol={{span: 18}}>
                            <Switch onChange={(e) => baseInfoChange(e, "formReadOnly")} value={baseInfo?.formReadOnly}
                                    checkedChildren="开启" unCheckedChildren="关闭" defaultChecked/>
                        </Form.Item>
                    </Form>
                </Card>

            </div>

        );
    }
;

export default FormConfigurationView;
